@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --body-bg: var(--p-surface-0);
  --body-text-color: var(--p-surface-900);
  --card-border: 1px solid var(--border-color);
  --card-bg: var(--p-surface-0);
  --border-color: var(--p-surface-200);
  --text-color: var(--p-surface-700);
  --overlay-background: #ffffff;
  --surface-border: #e2e8f0;
  --surface-ground: #f1f5f9;
}

:root[class="p-dark"] {
  --body-bg: var(--p-surface-950);
  --body-text-color: var(--p-surface-50);
  --card-border: 1px solid transparent;
  --card-bg: var(--p-surface-900);
  --border-color: rgba(255, 255, 255, 0.1);
  --text-color: var(--p-surface-0);
  --overlay-background: var(--p-surface-900);
  --surface-border: #334155;
  --surface-ground: #020617;
}

html {
  font-size: 14px;
}

body {
  margin: 0px;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--body-bg);
  font-weight: normal;
  color: var(--body-text-color);
  /* padding: 1rem; */
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: inline-block;
}
.card {
  background: var(--card-bg);
  border: var(--card-border);
  padding: 2rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
